import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import '../../../app_files.dart';
import 'action.dart';
import 'state.dart';

Widget buildView(
    BottomSelectViewState state, Dispatch dispatch, ViewService viewService) {
  Widget _buildItem(BuildContext context, int index) {
    String name =
        state.isSearching ? state.searchItems[index] : state.items[index];
    return Container(
      height: 50,
      width: double.infinity,
      decoration: const BoxDecoration(
        border: Border(
          bottom: BorderSide(color: ThemeConfig.lineColor),
        ),
      ),
      child: MyInkWellWidget(
        child: Row(
          children: [
            Text(
              name,
              style: TextThemeConfig.Font15WithColor22,
            )
          ],
        ),
        onTap: () => dispatch(BottomSelectViewActionCreator.onTap(index)),
      ),
    );
  }

  double height = state.items.length * 50.0 + 80;
  if (height < 300) height = 300;
  if (state.showSearch) height += 38;
  if (height > ScreenUtil.screenHeightDp - ScreenUtil.statusBarHeight - 100)
    height = ScreenUtil.screenHeightDp - ScreenUtil.statusBarHeight - 100;

  return Container(
    height: height,
    decoration: const BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.only(
          topLeft: Radius.circular(8), topRight: Radius.circular(8)),
    ),
    child: SafeArea(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding:
                const EdgeInsets.only(left: 16, top: 16, bottom: 16, right: 20),
            child: Stack(
              children: [
                Center(
                  child: Text(
                    state.title,
                    style: TextThemeConfig.Font18WithColor22,
                  ),
                ),
                Positioned(
                  left: 3,
                  child: MyInkWellWidget(
                    child: const Text(
                      '取消',
                      style: TextThemeConfig.Font15WithColor22,
                    ),
                    onTap: () => Navigator.pop(viewService.context),
                  ),
                ),
              ],
            ),
          ),
          state.showSearch ?  Container(
            width: double.infinity,
            height: 38,
            padding: EdgeInsets.only(left: 12, right: 12),
            child: Container(
              padding: EdgeInsets.only(left: 8),
              decoration: BoxDecoration(
                color: ThemeConfig.separeColor,
                borderRadius: BorderRadius.all(Radius.circular(8)),
              ),
              child: Row(
                children: [
                  Padding(
                    padding: EdgeInsets.only(bottom: 1),
                    child: Image.asset(
                      'images/icon_search.png',
                      width: 14,
                    ),
                  ),
                  Padding(padding: EdgeInsets.only(left: 8)),
                  Expanded(
                    child: TextField(
                      style: TextThemeConfig.Font14WithColor22,
                      controller: state.textEditingController,
                      onChanged: (value) => dispatch(
                          BottomSelectViewActionCreator.onSearch(value)),
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: '搜索',
                        hintStyle: TextStyle(
                            color: ThemeConfig.black153Color, fontSize: 14),
                        contentPadding: EdgeInsets.only(bottom: 9),
                      ),
                    ),
                  ),
                  state.textEditingController.text.isEmpty
                      ? Container()
                      : InkWell(
                          child: Padding(
                            padding: EdgeInsets.only(right: 8, left: 5),
                            child: Image.asset(
                              'images/ic_del.png',
                              width: 20,
                            ),
                          ),
                          onTap: () {
                            state.isSearching = false;
                            state.textEditingController.text = '';
                            dispatch(BottomSelectViewActionCreator.onAction());
                          },
                        )
                ],
              ),
            ),
          ) : Container(),
          Expanded(
            child: Container(
              padding: const EdgeInsets.only(left: 12, right: 12),
              child: ListView.builder(
                itemBuilder: _buildItem,
                itemCount: state.isSearching
                    ? state.searchItems.length
                    : state.items.length,
              ),
            ),
          ),
        ],
      ),
    ),
  );
}
